<template>
  <div class="Backtotop" v-show="show"  @scroll="Scroll()">

    <van-button  class="back" @click="backTop()" color="linear-gradient(to right, #ff6034, #ee0a24)">
      回到顶部
    </van-button>

  </div>
</template>
<script>
import index from '../../pages/home/children/index'
export default {
    components:{
       index
    },
    data() {
        return {
            show:false,
            scrollTop:0,
        }
    },
   mounted(){
        // 先给页面注册滚动事件
        document.addEventListener('scroll',this.Scroll,true)
    },
    methods:{
    // 回到顶部

    backTop () {
        const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
        // console.log(clientHeight);
        const that = this;
        let timer = setTimeout(() => {
            let ispeed = Math.floor(-that.scrollTop / 5);
            document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed;
            if (this.scrollTop === 0) {
                clearInterval(timer);
            }
        }, 30)
        this.show = false;
    },
    Scroll(){
        // scrollHeight（文档内容实际高度，包括超出视窗的溢出部分）、
        // scrollTop（滚动条滚动距离）、
        // clientHeight（窗口可视范围高度）。
        const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
        // 设备屏幕高度
        const scrollTop = document.body.scrollTop; // div 到头部的距离
        const scrollHeight = document.body.scrollHeight; // 滚动条的总高度
        // console.log(clientHeight);
        // console.log(scrollTop);
        // console.log(scrollHeight);
        //滚动条到底部的条件
        if (scrollTop > clientHeight) {
          // div 到头部的距离 + 屏幕高度 = 可滚动的总高度
          this.show=true
        } else {
            this.show=false
        }
    }


  }
};
</script>
<style lang="less">
.Backtotop{
    position: relative;
    .back{
        line-height: 80px;
    height: 80px;
    position: fixed;
    top: 1130px;
    right: 10px;
    border-radius:100px;
   }
}

</style>
